<template>
  <div>
    <div class="chartbox1">
      <div class='echart-brand'>
        <div ref="carcustomers" id='car-customer-charts' style='width:96%;height:96%'></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:"carCustomer",
    props:['carCustomer','mark'],
    watch:{
      carCustomer(){
        this.renderCharts(this.carCustomer);
      }
    },
    methods:{
      renderCharts(data){
        const brandCharts = this.$echarts.init(this.$refs['carcustomers']);
        const option = {
          title:{
            text:this.mark==='in'?'商户出库量排行榜TOP5 (单位/辆)':'商户销售额排行榜TOP5 (单位/万元)',
            textStyle: {
              color: '#00dcde',
              fontSize: 16,
            },
            left: 10,
            top: 10
          },
          grid:{
            left:'25%',
            top:'15%',
            bottom:'10%'
          },
          yAxis:{
            data:data.shopName,
            axisLabel:{
              color:"#fff",
              fontSize:'13'
            }
          },
          xAxis:{
            axisLabel:{
              color:"#fff",
              fontSize:'14'
            },
            splitLine:{
              lineStyle:{
                color:['rgba(255,255,255,0.2)']
              }
            }
          },
          series:[{
            name:"品牌",
            type:"bar",
            barWidth:'25',
            barGap:'20',
            data:data.storageNum,
            itemStyle:{
              color: function (params){
                var colorList = ['#088BEB','#0EC49E','#F0BD26','#FF604D','#60C9FF'];
                return colorList[params.dataIndex];
              }
            },
            label:{
              show:true,
              position:'right',
              fontSize:12,
              color:'#fff',
            },
          }]
        };
        brandCharts.setOption(option)
      }
    }
  }
</script>
